<template>
  <a-card :bordered="false">
    <vxe-toolbar ref="xToolbar" :loading="loading > 0">
      <template #buttons>
        <a-button type="primary" icon="plus" @click="insertEvent">{{$t('m.common.button.add')}}</a-button>
        <span class="action-button-gap"></span>
        <a-button type="primary" icon="save" @click="saveEvent">{{ $t('m.common.button.save') }}</a-button>
        <span class="action-button-gap"></span>
        <a-button type="default" icon="delete" @click="removeSelectEvent">{{ $t('m.common.button.delete') }}</a-button>
        <span class="action-button-gap"></span>
        <a-button type="default" icon="diff" @click="randomCodeEvent">{{$t('m.eform.localeProvider.label.randomCodeEvent')}}</a-button>
      </template>
    </vxe-toolbar>

    <vxe-table
      header-align="center"
      border
      keep-source
      :height="height - 52 - 40"
      show-overflow
      show-header-overflow
      ref="xTable"
      :row-config="{isHover: true, keyField: 'id'}"
      :loading="loading > 0"
      :data="tableData"
      :edit-rules="validRules"
      :column-config="{resizable: true}"
      :edit-config="{trigger: 'click', mode: 'row', showUpdateStatus: true, showInsertStatus: true}">
      <vxe-column type="checkbox" width="50" align="center"></vxe-column>
      <vxe-column type="seq" :title="$t('m.common.label.number')" width="50" align="center"></vxe-column>
      <vxe-column field="code" :title="$t('m.common.label.code')" :edit-render="{name: 'input'}"></vxe-column>
      <vxe-column field="zhCn" :title="$t('m.common.label.Chinese')" :edit-render="{name: 'input'}"></vxe-column>
      <vxe-column field="enUs" :title="$t('m.common.label.English')" :edit-render="{name: 'input'}"></vxe-column>
      <vxe-column :title="$t('m.common.label.operate')" width="100" align="center">
        <template #default="{ row }">
          <a @click="removeRowEvent(row)">{{ $t('m.common.button.delete') }}</a>
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-pager
      border
      size="small"
      :loading="loading > 0"
      :current-page="tablePage.currentPage"
      :page-size="tablePage.pageSize"
      :total="tablePage.totalResult"
      :page-sizes="tablePage.pageSizes"
      :layouts="tablePage.layouts"
      @page-change="handlePageChange">
    </vxe-pager>
  </a-card>
</template>

<script>

import {getAction} from '@/api/manage'
import YchConstant from "@/api/YchConstant";
import {LocaleMixin} from "../js/LocaleMixin";
import {VxeTableMixin} from "../js/VxeTableMixin";

export default {
  name: 'LocaleSystemList',
  mixins: [LocaleMixin, VxeTableMixin],
  data() {
    return {
      height: document.body.clientHeight - 165,
      url: {
        getSystemLocales: YchConstant.PREFIX_EFORM + '/manage/localeProvider/getSystemLocales',
        saveLocales: YchConstant.PREFIX_EFORM + '/manage/localeProvider/saveLocales',
      }
    }
  },
  created() {
    this.loadList();
  },
  methods: {
    async loadList() {
      this.loading++
      const param = this.getPageQuery()
      let res = await getAction(this.url.getSystemLocales, param)
      if (res.success) {
        this.tableData = res.result.records
        this.setPageTotal(res)
      } else {
        this.tableData = []
        this.messageUtil.warning(res.message)
      }
      this.loading--
    },
  }
}
</script>
